<template>
  <div class="container">
    <el-carousel class="profile" height="400px">
      <el-carousel-item  v-for="(item,index) in testList" :key="index">
        <h3>
          <img :src="item.photo" class="profile-cover"  slot="reference">
          <div class="profile-menu">
            <div class="profile-avatar">
              <img :src="team.photo" class="profile-img">
              <div class="profile-name">{{team.name}}</div>
            </div>
            <div class="follow-buttons">
              <button class="follow" @click="like(item.id)">
                <svg t="1638805666299" class="icon"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1052" width="20" height="20"><path d="M484.267 272.021l6.634 6.72c5.974 5.974 13.014 12.843 21.099 20.63l9.195-8.918c7.253-7.04 13.44-13.184 18.56-18.432a193.28 193.28 0 0 1 277.44 0c75.904 77.526 76.629 202.795 2.133 281.195L512 853.333 204.672 553.237c-74.475-78.421-73.77-203.69 2.133-281.216a193.28 193.28 0 0 1 277.44 0z" p-id="1053" :fill="item.like_svg_color"></path></svg>
                <span style="position:relative; top:-4px;">{{item.likeSum}}</span>
              </button>
              <el-tooltip  placement="bottom" effect="light" :offset="10">
                <template slot="content">
                  <p style="max-width:700px;font-size: 15px">{{item.title}}</p>
                </template>
                <button class="follow  follow-option" >详情</button>
              </el-tooltip>
            </div>
          </div>
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div class="trends">
      <a href="#">
        <svg t="1637854211785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23014" width="50" height="50"><path d="M711.000555 80.168795l176.257635 176.257635-176.257635 176.257634-176.257634-176.257634 176.257634-176.257635m-398.00111 90.971683a28.428651 28.428651 0 0 1 28.428651 28.42865v170.571905a28.428651 28.428651 0 0 1-28.428651 28.428651h-170.571905a28.428651 28.428651 0 0 1-28.42865-28.428651v-170.571905a28.428651 28.428651 0 0 1 28.42865-28.42865h170.571905m511.715713 454.858412a28.428651 28.428651 0 0 1 28.428651 28.42865v227.429206a28.428651 28.428651 0 0 1-28.428651 28.428651h-227.429206a28.428651 28.428651 0 0 1-28.428651-28.428651v-227.429206a28.428651 28.428651 0 0 1 28.428651-28.42865h227.429206m-511.715713 0a28.428651 28.428651 0 0 1 28.428651 28.42865v227.429206a28.428651 28.428651 0 0 1-28.428651 28.428651h-170.571905a28.428651 28.428651 0 0 1-28.42865-28.428651v-227.429206a28.428651 28.428651 0 0 1 28.42865-28.42865h170.571905m398.00111-625.430317L455.142699 256.42643l255.857856 255.857857 255.857857-255.857857-255.857857-255.857857z m-398.00111 113.714603h-170.571905A85.285952 85.285952 0 0 0 57.141588 199.569128v170.571905a85.285952 85.285952 0 0 0 85.285952 85.285952h170.571905A85.285952 85.285952 0 0 0 398.285397 370.141033v-170.571905a85.285952 85.285952 0 0 0-85.285952-85.285952z m511.715713 454.858412h-227.429206a85.285952 85.285952 0 0 0-85.285952 85.285952v227.429206a85.285952 85.285952 0 0 0 85.285952 85.285953h227.429206a85.285952 85.285952 0 0 0 85.285952-85.285953v-227.429206a85.285952 85.285952 0 0 0-85.285952-85.285952z m-511.715713 0h-170.571905a85.285952 85.285952 0 0 0-85.285952 85.285952v227.429206a85.285952 85.285952 0 0 0 85.285952 85.285953h170.571905a85.285952 85.285952 0 0 0 85.285952-85.285953v-227.429206a85.285952 85.285952 0 0 0-85.285952-85.285952z" fill="#1296db" p-id="23015"></path></svg>
        优秀成果展示
      </a>
      <div class="follow-buttons">
        <button class="follow">上传</button>
        <button class="follow follow-option active">下载</button>
      </div>
    </div>
    <div class="videos">
      <div class="video"  v-for="(item,index) in workList" :key="index">
        <img :src="item.photo" class="video_img">
        <div class="video-content">{{item.title}}</div>
        <div class="view">{{item.viewNum}}k 点赞</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Work",
  data(){
    return{
      team:{id:'1',name:'杨超月队',photo:'https://i.postimg.cc/FRqMnv3B/team1.jpg'},
      testList:[
        {id:'1',teamId:'1',photo:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190313%2F4626db3e3c9d4097abbc6167cad55990.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642312492&t=13281aa5670add4c4c2690832d3431db',likeSum:7777,title:'这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片这是第一张图片'},
      ],
      workList:[
        {id:'001',title:'日历',photo:require('./team1_2.png'),viewNum:15.4},
        {id:'001',title:'日落',photo:require('./team1_3.png'),viewNum:12.4},
        {id:'001',title:'欢迎',photo:require('./team1_4.png'),viewNum:14.1},
        {id:'001',title:'创意',photo:require('./team1_5.png'),viewNum:25.4},
        {id:'001',title:'时钟',photo:require('./team1_6.png'),viewNum:10.2},
        {id:'001',title:'照片',photo:require('./team1_7.jpg'),viewNum:99.9},
      ]
    }
  },
  methods:{
    like(id){
      this.testList.forEach((e)=>{
        if(e.id===id){
          if(!e.like){
            e.like=!e.like
            e.likeSum++
            this.$set(e,'like_svg_color', '#d81e06')
          }else{
            e.like=!e.like
            e.likeSum--
            e.like_svg_color='#8a8a8a'
          }
        }
      })
    }
  },

  computed: {
  }
}
</script>

<style scoped>

h3 {
  display: flex;
  width: 100%;
  height: 100%;
  margin-top: 0;
  flex-direction: column;
}
.el-tooltip_popper {
  max-width: 400px !important;
  line-height: 180%;
}
.profile {
  display: flex;
  /*height: 45vh;*/
  /*max-height: 350px;*/
  /*min-height: 270px;*/
  position: relative;
  justify-content: flex-end;
  flex-direction: column;
}

.profile-cover {
  display: flex;
  margin-top: 0;
  width: 100%;
  height:85%;
  object-fit: cover;
  object-position: center;
  /*border-radius: 4px 4px 6px 6px;*/
}

.profile-menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: var(--header-bg-color);
  box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 4px 4px;
  padding: 0 25px;
  z-index: 2;
}

.profile-img {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  object-fit: cover;
  margin-right: 15px;
}

.profile-avatar {
  margin-top: 2px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.profile-name {
  white-space: nowrap;
}
.profile-info {
  justify-content: center;
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  z-index: 2;
}

.profile-name {
  color: var(--main-color);
}

.profile-item {
  display: flex;
  align-items: center;
  color: #fff;
  padding: 26px 16px;
  white-space: nowrap;
}
.follow-buttons {
  display: flex;
}

.follow {
  border: 2px solid var(--border-color);
  border-radius: 25px 0 0 25px;
  height: 40px;
  color: var(--body-color);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background-color: transparent;
}

.follow-option {
  border-radius: 0 25px 25px 0;
  margin-left: -2px;
}

.trends {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 45px;
}
a {
  text-decoration: none;
  color: var(--body-color);
  display: flex;
  align-items: center;
  font-size: 15px;
  white-space: nowrap;
}

.trends svg {
  width: 20px;
  margin-right: 16px;
}

.follow-option.active {
  background-color: var(--header-bg-color);
  margin-left: -3px;
}

.videos {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}


.video video {
  transition: .4s;
  max-width: 100%;
  display: block;
  border-radius: 4px 4px 0 0;
}
.video_img{
  height: 200px;
}
.video {
  overflow: hidden;
  box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
  background-color: var(--header-bg-color);
  cursor: pointer;
}


.video-content {
  width: 100%;
  color: var(--main-color);
  padding: 15px 10px 0;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view {
  padding: 10px;
  position: relative;
  background-color: var(--header-bg-color);
  z-index: 1;
  font-size: 13px;
}

</style>